<template>
 <div class="app">   
    <!-- 添加班级模块 -->
    <div class="clearfix" style="margin-bottom:20px;">      
      <el-button type="primary" style="float:left" @click="openAddClass()">添加</el-button>
    </div>    
    <!--显示班级数据-->
     <el-table :data="classData" borderstyle="width: 100%" border width="60%">
      <el-table-column type="index" label="序号" width="80"></el-table-column> 
      <el-table-column prop="majorName" label="专业名称" width="180"></el-table-column>
      <el-table-column prop="gradeName" label="年级名称" width="180"></el-table-column> 
      <el-table-column prop="className" label="班级名称" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="220"></el-table-column>      
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-tooltip effect="dark" content="修改班级信息" placement="top">
        <el-button type="primary" icon="el-icon-edit" circle @click="openEditClass(scope.row)"></el-button>
       </el-tooltip> 
        <el-tooltip effect="dark" content="删除班级信息" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteClass(scope.row)"></el-button>
        </el-tooltip> 
        </template>
      </el-table-column>
    </el-table> 
      <!-- 添加班级弹出框模块 -->
    <el-dialog title="添加班级" :visible.sync="dialogAddVisible" width="30%" @close="closeAdddialog()">
      <el-form :model="addForm" :rules="rules" ref="addForm">
         <el-form-item label="专业名称" :label-width="formLabelWidth" prop="majorId" @change="change()" >         
         <el-select v-model="addForm.majorId" placeholder="请选择专业" style="width:100%" >
         <el-option v-for="item in majorOptions"
      :key="item.id"
      :label="item.majorName"
      :value="item.id">
         </el-option>          
          </el-select>
        </el-form-item>
        <el-form-item label="年级名称" :label-width="formLabelWidth" prop="gradeId" @click="majorBlur()">         
         <el-select v-model="addForm.gradeId" placeholder="请选择年级" style="width:100%">
         <el-option   v-for="item in gradeOptions"
      :key="item.id"
      :label="item.gradeName"
      :value="item.id"></el-option>          
          </el-select>
        </el-form-item>
        
        <el-form-item label="班级名称" :label-width="formLabelWidth" prop="className">
          <el-input v-model="addForm.className" autocomplete="off"></el-input>        
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input  type="textarea" v-model="addForm.remark" autocomplete="off"></el-input>
        </el-form-item>             
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="addClass('addForm')">提交</el-button>
        <el-button @click="closeAdddialog()">取 消</el-button>
      </div>
    </el-dialog>
        <!-- 修改班级弹出框模块 -->
    <el-dialog title="修改班级" :visible.sync="dialogEditVisible" width="30%" @close="closeEditdialog()">
      <el-form :model="editForm" :rules="rules" ref="editForm"> 
        <el-form-item label="专业名称" :label-width="formLabelWidth" prop="majorId" @change="change()" >         
         <el-select v-model="editForm.majorId" placeholder="请选择专业" style="width:100%" >
           <el-option v-for="item in majorOptions"
            :key="item.id"
            :label="item.majorName"
            :value="item.id">
           </el-option>          
          </el-select>
        </el-form-item>
        <el-form-item label="年级名称" :label-width="formLabelWidth" prop="gradeId" @click="majorBlur()">         
         <el-select v-model="editForm.gradeId" placeholder="请选择年级" style="width:100%">
           <el-option   v-for="item in gradeOptions"
            :key="item.id"
            :label="item.gradeName"
            :value="item.id">
           </el-option>          
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" :label-width="formLabelWidth" prop="className">
          <el-input v-model="editForm.className" autocomplete="off"></el-input>        
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input  type="textarea" v-model="editForm.remark" autocomplete="off"></el-input>
        </el-form-item>             
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="editClass('editForm')">提交</el-button>
        <el-button @click="closeEditdialog()">取 消</el-button>
      </div>
    </el-dialog> 
  </div>
</template>


<script>
   export default {
    name: 'classList',
    data() {
      return { 
        orgId:'000',//机构名称
        classData:[],
        addForm:{},
        editForm: {},
        formLabelWidth:'120px',       
        /*验证规则*/
        rules:{            
              className: [{
              required: true,
              message: '请输入班级名称',
              trigger: 'blur'
          }],
           majorId: [{
              required: true,
              message: '请输入专业名称',
              trigger: 'blur'
          }],
          gradeId: [{
              required: true,
              message: '请输入年级名称',
              trigger: 'blur'
          }],
          
          
        },
        //显示添加窗体
        dialogAddVisible:false,
        dialogEditVisible:false,       
        majorOptions:[],
        gradeOptions:[]
        }
      },
      created() {      
      this.render(); //渲染数据
      this.grades();
      this.majors();     
    },
    methods: {
        //查询年级信息
      async render() {        
        const {data: res} = await this.$http.post('class/query',{id:this.orgId}) // 获取数据      
        //console.log(res);
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
       this.classData = res.data;
      },
      //查询年级信息
      async grades(orgid)
      {       
        const {data: res} = await this.$http.post('grade/query', {id:this.orgId});
        var grades=[];
        grades=res.data;         
        for(var i=0;i<grades.length;i++)
        {
          grades[i].id=grades[i].gradeName+","+grades[i].id;
        }
         this.gradeOptions=grades;
      },
      //查询专业信息
      async majors(orgid)
      {        
        const {data: res} = await this.$http.post('major/query', {id:this.orgId});
        var majors=[];
        majors=res.data; 
        console.log('整合名称和id');
         for(var i=0;i<majors.length;i++)
        {
          majors[i].id=majors[i].majorName+","+majors[i].id;
        }
         console.log(majors);
        
         this.majorOptions=majors;
      },    
        //打开年级添加信息窗体
      async openAddClass(){
        this.dialogAddVisible = true; 
         console.log('整合专业名称和id');
         console.log(this.majorOptions);
          console.log('整合年级名称和id');
         console.log(this.gradeOptions);
      },
      
      //添加班级信息
      addClass(form){
        console.log('提交表单');
        console.log(this.addForm);
         this.$refs[form].validate(async valid => {
          if(!valid) return
          // 可以发起添加院校的网络请求         
          const {
            data: res
          } = await this.$http.post('class/save', this.addForm);
         if(res.ret==0){
          this.$message.success('添加班级成功！');
         // 重新获取专业列表数据
          this.render();
        }
         else
        {
           this.$message.error('添加班级失败：'+res.msg);
        }
      }
         )
      },
      //关闭年级添加窗体
      closeAdddialog()
      {
          this.dialogAddVisible = false;
          // this.$refs.form.resetFields();
          this.addForm=[];
      },
         //打开更新年级窗体
      async openEditClass(row){
        
        this.dialogEditVisible=true;
        console.log(row);
        const {
          data: res
        } = await this.$http.post('class/findById', {
          id: row.id
        })
         console.log(res);
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }        
        this.editForm = res.data;
      }, 
      //更新年级信息
    async editClass(form){
      console.log("当前窗体数据：");
       console.log(this.editForm);
       this.$refs[form].validate(async valid => {
          if(!valid) return
          // 发起修改年级信息的数据请求
          const {
            data: res
          } = await this.$http.post('class/update', this.editForm)
          //抛出异常错误
          if(res.ret !== 0) {
            return this.$message.error('更新年级信息失败：'+res.msg)
          } 
          else{         
          // 提示修改成功
          this.$message.success('更新年级信息成功！');
           // 刷新数据列表
          this.render();
          }
        })},
         //关闭更新年级窗体 
         closeEditdialog()
        {
           this.dialogEditVisible = false;
            this.editForm=[];
           //this.$refs.editForm.resetFields();
        },
        
        async deleteClass(row)
        {
         // 弹框询问是否删除数据
        const confirmResult = await this.$confirm(
          '此操作将删除该年级所有信息, 是否继续?',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        // 如果确认删除，则返回值为字符串 confirm
        // 如果取消了删除，则返回值为字符串 cancel
        // console.log(confirmResult)
        if(confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        
        //异步数据库删除
        const {         
          data: res
        } = await this.$http.post('class/update', {id: row.id,isValidated:'n'})
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }

        this.$message.success('删除班级成功！')
        this.render()
      } 
    }
    }
</script>

<style scoped="scoped">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }  
  .el-table
  {
    width:1000px;
  }
 .el-input {
    width: 130px;
  } 
  .clearfix {
    *zoom: 1
  }
  
  .clearfix:after {
    display: block;
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
 .el-input {
    width: 100%;
  }
</style>